import { t, Trans } from "@lingui/macro";
import Button from "components/Button/Button";
import Modal from "components/Modal/Modal";
import { numberToFixedCommas } from "lib/numbers";
import "./points.scss";

export default function HistoryPointsModal(props) {
  const {
    isHistoryPointsVisible,
    setIsHistoryPointsVisible,
    pointsInfo
  } = props;

  return (
    <Modal isVisible={isHistoryPointsVisible} setIsVisible={setIsHistoryPointsVisible} label={t`Phase-1 Points`}>
      <div className="CompoundModal-menu">
        <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>Trading Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.tradingVolume) || 0 }</div>
        </div>
        {/* <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>Liquidity Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.liquidity) || 0 }</div>
        </div> */}
        <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>Swap Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.swap) || 0 }</div>
        </div>
        <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>Referral Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.referral) || 0 }</div>
        </div>
        <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>Profit Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.traderProfit) || 0 }</div>
        </div>

        <div className="App-card-row point-py-10">
          <div className="label">
            <Trans>My Total Points</Trans>
          </div>
          <div>{ numberToFixedCommas(pointsInfo?.phrase1?.total) || 0 }</div>
        </div>
      </div>
      <div className="Exchange-swap-button-container">
        <Button variant="primary-action" className="w-full" onClick={() => setIsHistoryPointsVisible(false) }>
          <Trans>Close</Trans>
        </Button>
      </div>
    </Modal>
  );
}